{% extends 'common_project_tpl.html' %}
{% load static %}
{% load space_cal_tag %}
{% block css %}
    <style>
        .row1 {
            display: grid;
            grid-template-columns: 2fr 1fr;
            column-gap: 10px;
        }

        .row2 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 10px;
        }

        #issue-panel a {
            text-decoration: none;
        }

        #issue-panel .sub-grid {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            place-items: center;
            gap: 20px;
        }

        #member-panel .sub-grid {
            margin-top: 10px;
            display: grid;
            grid-template-columns:repeat(4, 1fr);
            gap: 20px;
        }

        .left-avatar {
            display: inline-block;
            width: 30px;
            height: 30px;
            background-color: #304659;
            color: white;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
        }

        .inline {
            display: inline-block;
        }

        .table > tbody > tr > td {
            border: 0;
        }

        .width0 {
            min-width: 0;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="m1 container-fluid" style="margin-top: 20px;">
        <div class="row1">
            <div class="panel panel-default width0">
                <div class="panel-heading">
                    <i class="fa fa-bar-chart" aria-hidden="true"></i>
                    新增问题趋势
                </div>
                <div class="panel-body" id="hchart">

                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-cog title-icon"></i>
                    详细
                </div>
                <div class="panel-body">
                    <table class="table">
                        <colgroup>
                            <col class="col-lg-3">
                            <col class="col-lg-9">
                        </colgroup>
                        <tbody>
                        <tr>
                            <td>项目名称：</td>
                            <td>{{ request.tracer.project.project_title }}</td>
                        </tr>
                        <tr>
                            <td>项目描述：</td>
                            <td>{{ request.tracer.project.project_desc }}</td>
                        </tr>
                        <tr>
                            <td>创建时间：</td>
                            <td>{{ request.tracer.project.create_time }}</td>
                        </tr>
                        <tr>
                            <td>项目空间：</td>
                            <td>{% cla_space request.tracer.project.used_space %}/{{ right_content.project_space }}G</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="row2">
            <div class="panel panel-default" id="issue-panel">
                <div class="panel-heading">
                    <i class="fa fa-quora" aria-hidden="true"></i>
                    问题
                </div>
                <div class="panel-body">
                    <div class="sub-grid">
                        {% for item in count %}
                            <div>
                                <a href="{% url 'main:issues' pro_id %}?status__in={{ item.status }}"
                                   style="text-align: center">
                                    <div style="font-size: xx-large">{{ item.count }}</div>
                                    <div>{{ item.name }}</div>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    项目成员
                </div>
                <div class="panel-body" id="member-panel">
                    <div style="margin: 10px 0px;">创建者</div>
                    <div class="sub-grid">
                        <div>
                            <div class="left-avatar">{{ request.tracer.project.creator.realname.0|upper }}</div>
                            <div class="inline">{{ request.tracer.project.creator.realname }}</div>
                        </div>
                    </div>
                    <div style="margin: 10px 0px;">参与者</div>
                    <div class="sub-grid">
                        {% for join_info in request.tracer.project.projectrelation_set.all %}
                            <div>
                                <div class="left-avatar">{{ join_info.user.realname.0|upper }}</div>
                                <div class="inline">{{ join_info.user.realname }}</div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-list-ul" aria-hidden="true"></i>
                    动态
                </div>
                <div class="panel-body comment-list pre-scrollable">
                    <table class="table">
                        <colgroup>
                            <col style="width: 40px;">
                            <col style="width: auto;">
                            <col style="width: 156px;">
                        </colgroup>
                        <tbody>
                        {% for item in reply %}
                            <tr>
                                <td>
                                    <div class="left-avatar">{{ item.creator.realname.0|upper }}</div>
                                </td>
                                <td>
                                    <div style="font-weight: bold">{{ item.creator.realname }}</div>
                                    <div style="font-weight: bold">
                                        <label for="" class="label label-info">问题</label>
                                        #{{ item.issues.id }} {{ item.issues.subject }}
                                    </div>
                                    <div style="background-color:wheat;margin-top: 5px;">{{ item.content }}</div>
                                </td>
                                <td>{{ item.create_datetime }}</td>
                            </tr>
                        {% endfor %}

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


{% endblock %}
{% block js %}
    <script src="{% static 'js/highcharts.js' %}"></script>
    <script>
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        $(function () {
            initHeight();
            initPage();
            initChart();
        })

        function initHeight() {
            $(window).resize(function () {
                let max_height = $(window).height();
                $('.comment-list').css('max-height', (0.4 * max_height) + 'px');
            })
        }

        // 同样的首次进入页面也要加上
        function initPage() {
            let max_height = $(window).height();
            $('.comment-list').css('max-height', (0.4 * max_height) + 'px');
        }

        function initChart() {
            let chart_config = {
                title: { // 不显示标题
                    text: null
                },
                yAxis: { // 更改y轴的标题
                    title: {
                        text: '问题数'
                    }
                },
                legend: { // 禁用图例
                    enabled: false
                },
                credits: {  // 禁用版权信息
                    enabled: false
                },
                xAxis: {
                    type: 'datetime', // 以时间格式展示
                    tickInterval: 60 * 60 * 24 * 1000, // 间隔单位毫秒
                    labels: {
                        // 日期格式
                        formatter: function () {
                            return Highcharts.dateFormat('%m-%d', this.value);
                        },
                        // 旋转
                        rotation: -30
                    }
                },
                // 鼠标悬停显示内容
                tooltip: {
                    headerFormat: '<b>{point.key}</b><br>',
                    pointFormat: '<span style="color:{series.color}">\u25CF</span> 数量: {point.y} ',
                    xDateFormat: '%Y-%m-%d',
                },
                plotOptions: {
                    area: {
                        stacking: 'normal',
                        lineColor: '#666666',
                        lineWidth: 1,
                        marker: {
                            lineWidth: 1,
                            lineColor: '#666666'
                        }
                    }
                },
                series: [{
                    data: [
                        // [时间戳，数量] 期望数据类型
                    ]
                }]
            };
            $.ajax({
                url: "{% url 'main:api_dashboard_chart' pro_id %}",
                data: {
                    project:{{ pro_id }}
                },
                dataType: 'json',
                type: "get",
                success: function (res) {
                    console.log(res)
                    chart_config.series[0].data = res.data;
                    let chart = Highcharts.chart('hchart', chart_config);
                }
            })
        }


    </script>
{% endblock %}